<template>
    <div class="answerResultPage">
        <a-card>
            <!--使用栅格布局-->
            <a-row class="grid-demo" style="margin-bottom: 16px;">
                <a-col flex="750px" class="content-wrapper">
                    <h2>{{ answerResultData.resultName }}</h2>
                    <p>结果描述：{{ answerResultData.resultDesc }}</p>
                    <p>结果 id：{{ answerResultData.resultId }}</p>
                    <p>结果得分：{{ answerResultData.resultScore }}</p>
                    <p>我的答案：{{ answerResultData.choices }}</p>
                    <p>应用 id：{{ answerResultData.appId }}</p>
                    <p>应用类型：{{APPTYPE_MAP[answerResultData.appType] }}</p>
                    <p>评分策略：{{ SCORINGTYPE_MAP[answerResultData.scoringStrategy] }}</p>
                    <p>
                        <a-space>
                            答题人：
                            <div :style="{ display: 'flex', alignItems: 'center' }">
                                <a-avatar
                                        :size="24"
                                        :image-url="answerResultData.user?.userAvatar ?? myAvatar"
                                        :style="{ marginRight: '8px' }"
                                />
                                <a-typography-text
                                >{{ answerResultData.user?.userName ?? "无名" }}
                                </a-typography-text>
                            </div>
                        </a-space>
                    </p>
                    <p>
                        答题时间：{{ dayjs(answerResultData.createTime).format("YYYY-MM-DD HH:mm:ss") }}
                    </p>
                    <a-space size="medium">
                        <a-button type="primary" :href="`/answer/do/${answerResultData.appId}`">
                            去答题
                        </a-button>
                        <a-button type="outline" @click="doShare">
                            分享评分结果
                        </a-button>
                    </a-space>
                </a-col>
                <a-col flex="320px" style="margin-left: 24px">
                    <a-image width="100%" :src="answerResultData.resultPicture ? answerResultData.resultPicture : myResultPicture"></a-image>
                </a-col>
            </a-row>
        </a-card>
        <ShareModal ref="shareModalRef" :link="shareLink" title="评分结果分享" />
    </div>
</template>

<script setup lang="ts">
    import {defineProps, reactive, ref, watchEffect, withDefaults} from 'vue'
    import {listUserByPageUsingPost} from "@/api/userController";
    import message from "@arco-design/web-vue/es/message";
    import {getAppByIdUsingGet, listAppVoByPageUsingPost} from "@/api/appController";
    import AppCard from "@/components/AppCard.vue"
    import {APPTYPE_MAP,SCORINGTYPE_MAP} from "@/constant/enum";
    import { dayjs } from "@arco-design/web-vue/es/_utils/date";
    import API from "@/api";
    import {useLoginUserStore} from "@/store/userStore";
    import {getUserAnswerVoByIdUsingGet} from "@/api/userAnswerController";
    import {myAvatar} from '@/constant/photo'
    import {myResultPicture} from '@/constant/photo'
    import ShareModal from '@/components/ShareModal.vue'


    //获取当前登录用户
    const loginUserStore = useLoginUserStore();
    const currentUser = loginUserStore.loginUser;

    //获取应用的信息
    const answerResultData = ref<API.UserAnswerVO>({})

    //获取前页面传过来的id
    interface Props {
        id:string;
    }
    const props = withDefaults(defineProps<Props>(),{
        id:() =>{
            return "";
        }
    })


    //获取数据
    const loadData = async() =>{
        if(!props.id){
            return;
        }
        const res = await getUserAnswerVoByIdUsingGet({
            id:props.id as any
        });
        if(res.data.code === 0){
            answerResultData.value = res.data.data || {};
        }else{
            message.error("获取数据失败" + res.data.message)
        }
    }

    const shareLink = `${window.location.protocol}//${window.location.host}/answer/result/${props.id}`
    const shareModalRef = ref();
    const doShare =(e:Event) =>{
        if(shareModalRef.value){
            shareModalRef.value.handleClick();
        }
    }
    /**
     * 监听 searchParams 变量，改变时触发数据的重新加载
     */
    watchEffect(() =>{
        loadData()
    })
</script>

<style scoped>
    #answerResultPage .content-wrapper > *{
        margin-bottom: 24px;
    }

    .searchBar {
        text-align: center;
        margin-bottom: 28px;
    }

    .list-demo-action-layout .image-area {
        width: 183px;
        height: 119px;
        overflow: hidden;
        border-radius: 2px;
    }

    .list-demo-action-layout .list-demo-item {
        padding: 20px 0;
        border-bottom: 1px solid var(--color-fill-3);
    }

    .list-demo-action-layout .image-area img {
        width: 100%;
    }

    .list-demo-action-layout .arco-list-item-action .arco-icon {
        margin: 0 4px;
    }
</style>